<template>
  <el-dialog
    v-el-drag-dialog
    title="安检单详情"
    :visible.sync="visible"
    width="800px"
    @closed="reset"
  >
    <el-descriptions size="medium" title="安检信息">
      <el-descriptions-item label="安检单号">{{
        CheckDetail.checkId
      }}</el-descriptions-item>
      <el-descriptions-item label="安检类型">
        <span v-if="CheckDetail.checkType === 1">随单安检</span>
        <span v-if="CheckDetail.checkType === 2">定期安检</span>
      </el-descriptions-item>
      <el-descriptions-item label="客户名称">{{
        CheckDetail.csmName
      }}</el-descriptions-item>
      <el-descriptions-item label="客户类型">
        <span v-if="CheckDetail.csmType === 1">居民用户</span>
        <span v-if="CheckDetail.csmType === 2">商业用户</span>
        <span v-if="CheckDetail.csmType === 4">工业用户</span>
      </el-descriptions-item>
      <el-descriptions-item label="联系电话" :span="3">{{
        CheckDetail.csmPhone
      }}</el-descriptions-item>
      <el-descriptions-item label="客户地址" :span="3">{{
        CheckDetail.csmAddress
      }}</el-descriptions-item>
      <el-descriptions-item label="责任机构" :span="3">{{
        CheckDetail.orgName
      }}</el-descriptions-item>
      <el-descriptions-item label="安检时间" :span="3">{{
        CheckDetail.checkDt
      }}</el-descriptions-item>
      <el-descriptions-item label="安检人" :span="3">{{
        CheckDetail.checkUser
      }}</el-descriptions-item>
      <el-descriptions-item label="备注" :span="3">{{
        CheckDetail.remark
      }}</el-descriptions-item>
    </el-descriptions>
    <div class="title">安检内容</div>
    <ul
      v-for="(item, index) in CheckDetail.billItemList"
      :key="item.itemDetailId"
      class="gasCheckDetai"
    >
      <li v-if="index === 0">
        <div>{{ item.itemName }}</div>
        <p v-if="item.itemType === 1">
          <el-radio v-model="radio" label="1" disabled>{{
            item.itemDetailName
          }}</el-radio>
        </p>
        <p v-if="item.itemType === 3">
          <el-checkbox v-model="checked" disabled>{{
            item.itemDetailName
          }}</el-checkbox>
        </p>
        <p v-if="item.itemType === 5">
          <span>{{ item.itemDetailName }}</span>
        </p>
      </li>
      <li v-if="index !== 0">
        <div
          v-if="
            index !== 0 &&
              item.itemName !== CheckDetail.billItemList[index - 1].itemName
          "
        >
          {{ item.itemName }}
        </div>
        <p v-if="index !== 0 && item.isChecked === 1">
          <span
            v-if="item.itemType === 1"
          ><el-radio v-model="radio" label="1" disabled>{{
            item.itemDetailName
          }}</el-radio></span>
          <span
            v-if="item.itemType === 3"
          ><el-checkbox v-model="checked" disabled>{{
            item.itemDetailName
          }}</el-checkbox></span>
          <span v-if="item.itemType === 5">{{ item.itemDetailName }}</span>
        </p>
      </li>
    </ul>

    <div v-if="CheckDetail.cmSignPict">
      <div class="title">客户签字</div>
      <img
        :src="imgBaseUrl + CheckDetail.cmSignPict"
        alt="客户签字"
        class="securityOrderImg"
      >
    </div>

    <div v-if="imageNameArray.length > 0">
      <div class="title">安检拍照</div>
      <img
        v-for="(item, index) in imageNameArray"
        :key="index"
        :src="imgBaseUrl + item"
        alt="安检拍照"
        class="securityOrderImg"
      >
    </div>

    <div v-if="billItemNew.length > 0">
      <div class="title">整改内容</div>
      <table class="pure-table pure-table-bordered">
        <thead>
          <tr>
            <th>序号</th>
            <th>整改项</th>
            <th>隐患级别</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in billItemNew" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.itemDetailName + item.itemName }}</td>
            <td>{{ item.warnLevelTxt }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="title">一次整改结果反馈</div>

    <div slot="footer" class="dialog-footer">
      <template v-if="model === 'info'">
        <el-button @click="visible = false"> 关闭 </el-button>
      </template>
      <template v-if="model === 'examine'">
        <el-button type="primary" @click="examine(true)"> 合格 </el-button>
        <el-button type="primary" @click="examine(false)"> 驳回 </el-button>
      </template>
    </div>
  </el-dialog>
</template>

<script>
  import {
    gasCheckQueryDetail,
    gasWarningTraceDetail,
    gasCheckBillAudit
  } from '@/api/index'
  import { imgBaseUrl } from '@/utils/config'

  export default {
    name: 'securityOrderManage',
    data() {
      return {
        temp: {},
        imgBaseUrl: imgBaseUrl,
        visible: false,
        checked: true,
        radio: '1',
        model: 'info',
        billItemNew: [],
        imageNameArray: [],
        CheckDetail: {
          billItemList: []
        }
      }
    },
    methods: {
      open(temp, openOrderInfo) {
        this.visible = true
        if (temp) {
          this.gasCheckDetail(temp.checkId)
          this.temp = temp
        }
        if (openOrderInfo) {
          this.model = openOrderInfo
        }
      },
      gasCheckDetail(checkId) {
        gasCheckQueryDetail({ checkId }).then(res => {
          this.CheckDetail = res.data
          this.getTableInfo(res.data.billItemList)
          const imageName = res.data.imageName
          this.imageNameArray = imageName.split(';')
        })
        gasWarningTraceDetail({ checkId }).then(res => {
          // 无样式
        })
      },
      examine(val) {
        let checkStatus = 3
        if (val) {
          checkStatus = 2
        }
        gasCheckBillAudit({
          checkIds: this.temp.checkId,
          checkStatus: checkStatus
        }).then(res => {
          if (res.success) {
            this.$message({
              message: '操作成功!',
              type: 'success'
            })
            this.visible = false
            this.$parent.search()
          } else {
            this.$message({
              message: '操作失败！',
              type: 'error'
            })
          }
        })
      },
      getTableInfo(billItemList) {
        const billItemNew = []
        let warnLevelTxt = ''
        billItemList.forEach(element => {
          if (element.warnLevel > 0) {
            if (element.warnLevel === 1) {
              warnLevelTxt = '一般隐患'
            }
            if (element.warnLevel === 2) {
              warnLevelTxt = '严重隐患'
            }
            if (element.warnLevel === 3) {
              warnLevelTxt = '隐患'
            }
            if (element.warnLevel === 4) {
              warnLevelTxt = 'level4'
            }
            if (element.warnLevel === 5) {
              warnLevelTxt = 'level5'
            }
            billItemNew.push({
              itemDetailName: element.itemDetailName,
              itemName: element.itemName,
              warnLevelTxt: warnLevelTxt
            })
          }
        })
        this.billItemNew = billItemNew
      },

      reset() {
        this.billItemNew = []
        this.imageNameArray = []
        this.CheckDetail = {
          billItemList: []
        }
      }

    }
  }
</script>

<style lang="scss" scoped>
.title {
  margin: 20px 0;
  font-size: 16px;
  font-weight: 700;
}
.gasCheckDetai li {
  margin: 10px;
  p {
    margin: 10px 2rem;
  }
}
.securityOrderImg {
  width: 200px;
  height: 300px;
  margin: 5px 10px;
  border: 1px solid #dfdfdf;
  border-radius: 10px;
}
.securityOrderInfo >>> .el-descriptions__table .el-descriptions-item__cell {
  font-size: 14px;
  line-height: 2.5;
}
.securityOrderInfo >>> .el-descriptions-item__label:not(.is-bordered-label) {
  width: 60px;
}
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

.pure-table {
  border: 1px solid #cbcbcb;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
}

.pure-table caption {
  padding: 1em 0;
  font: italic 85%/1 arial, sans-serif;
  color: #000;
  text-align: center;
}

.pure-table td,
.pure-table th {
  padding: 0.5em 1em;
  margin: 0;
  overflow: visible;
  font-size: inherit;
  border-left: 1px solid #cbcbcb;
  border-width: 0 0 0 1px;
}

.pure-table thead {
  color: #000;
  text-align: left;
  vertical-align: bottom;
  background-color: #e0e0e0;
}

.pure-table td {
  background-color: transparent;
}

.pure-table-bordered td {
  border-bottom: 1px solid #cbcbcb;
}

.pure-table-bordered tbody > tr:last-child > td {
  border-bottom-width: 0;
}
</style>
